<!-- <template>   
    <router-view></router-view>
    <div class="myPage">
      <div class="head">
        <span class="empty">
          <van-icon name="setting-o" @click="myOptions"/>
          
        </span>
        <van-icon name="chat-o" />
      </div>
      <div class="userWrap" @click="allInfo">
        <div class="userAvatar">
          <img src="@/assets/head.jpg" alt="" />
        </div>
        <div class="userInfo">
          <span>手工客123</span>
          <br />
          <span>关注 2 粉丝 1</span>
        </div>
        <div class="userWebsite">
          <span>个人主页</span>
        </div>
      </div>
      <div class="shopping">
        <div class="cart">
          1
          <br />
          <span class="shoppingSpan">购物车</span>
        </div>
        <span class="shoppingSpan">|</span>
        <div class="storeUp">
          1
          <br />
          <span @click="allCol" class="shoppingSpan">收藏</span>
        </div>
      </div>
      <div class="center">
        <div class="OrdersCentre">
          订单中心
          <van-grid :column-num="5" :border="false">
            <van-grid-item @click="myOrder(0)">
              <svg class="icon" aria-hidden="true" >
                 <use xlink:href="#icon-quanbudingdan1"></use>
              </svg>
              <span class="ordersCentreSpan">全部</span>
            </van-grid-item>
            <van-grid-item @click="myOrder(1)">
              <svg class="icon" aria-hidden="true" >
                 <use xlink:href="#icon-daifukuan"></use>
              </svg>
              <span class="ordersCentreSpan">待付款</span>
            </van-grid-item>
            <van-grid-item @click="myOrder(2)">
              <svg class="icon" aria-hidden="true" >
                 <use xlink:href="#icon-daifahuo"></use>
              </svg>
              <span class="ordersCentreSpan">待发货</span>
            </van-grid-item>
            <van-grid-item @click="myOrder(3)">
              <svg class="icon" aria-hidden="true" >
                 <use xlink:href="#icon-daishouhuo"></use>
              </svg>
              <span class="ordersCentreSpan">待收货</span>
            </van-grid-item>
            <van-grid-item @click="myOrder(4)">
              <svg class="icon" aria-hidden="true" >
                 <use xlink:href="#icon-daipingjia"></use>
              </svg>
              <span class="ordersCentreSpan">待评价</span>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="ServiceCentre OrdersCentre">
          服务中心
          <van-grid :border="false">
            <van-grid-item @click="participateClass">
              <svg class="icon" aria-hidden="true" >
                 <use xlink:href="#icon-kecheng"></use>
              </svg>
              <span class="ordersCentreSpan">参与课程</span>
            </van-grid-item>
            <van-grid-item @click="officialService">
              <svg class="icon" aria-hidden="true" >
                 <use xlink:href="#icon-kefu"></use>
              </svg>
              <span class="ordersCentreSpan">官方客服</span>
            </van-grid-item>
            <van-grid-item @click="dataBase">
              <svg class="icon" aria-hidden="true" >
                 <use xlink:href="#icon-ziliaoku"></use>
              </svg>
              <span class="ordersCentreSpan">资料库</span>
            </van-grid-item>
            <van-grid-item @click="draftBox">
              <svg class="icon" aria-hidden="true" >
                 <use xlink:href="#icon-caogaoxiang"></use>
              </svg>
              <span class="ordersCentreSpan">草稿箱</span>
            </van-grid-item>
           
          </van-grid>
        </div>
  
      </div>
    </div>
  
  
  </template>
      
  <script setup lang='ts'>
    import { ref } from "vue";
    import {useRouter} from 'vue-router'
    const router = useRouter()
    function myOptions() {
      router.push(
        {
           name:'myOptions', 
        }
      )
    }
    function allInfo() {
      router.push(
        {
          name:"allInfo"
        }
      )
    }
    function myOrder(i:any) {
      router.push(
        {
           name:'myOrder',
           query:{
            myindex:i
           }
        }
      )
    }
    function participateClass() {
      router.push({
        name:"participateClass"
      })
    }
    function officialService() {
      router.push({
        name:"officialService"
      })
    }
    function dataBase() {
      router.push({
        name:"dataBase"
      })
    }
    
    function draftBox() {
      router.push({
        name:"draftBox"
      })
    }
  function allCol() {
    router.push({
        name:"allCol"
      })
  }
  </script>
      
  <style scoped>
  .myPage {
    padding: 10px;
  }
  .head {
    float: right;
    font-size: 25px;
    color: gray;
    margin-right: 10px;
  }
  .empty {
    margin-right: 20px;
  }
  .userWrap {
    width: 100%;
    display: flex;
  }
  .userAvatar .userWebsite {
    flex: 1;
  }
  .userInfo {
    flex: 2;
    line-height: 25px;
  }
  .userAvatar > img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .userInfo > span:nth-child(3) {
    color: gray;
    font-size: 10px;
  }
  .userWebsite{
      display: flex;
      align-items: flex-end;
  }
  .userWebsite > span {
    background: red;
    border-radius: 10px;
    padding: 5px;
    font-size: 10px;
    color: white;
  }
  .shopping {
    display: flex;
  
    align-items: center;
  }
  .shopping > div {
    flex: 1;
    text-align: center;
  }
  .shoppingSpan {
    color: gray;
    font-size: 12px;
  }
  .center{
      margin-top: 20px;
  }
  .OrdersCentre{
      height: 100px;
      padding: 10px;
      border: 1px solid gainsboro;
      border-radius: 5px;
      box-shadow:0px 0px 2px 1px #ece8e8da ;
      margin-top: 8px;
  }
  .icon{
    font-size: 30px;
  }
  .ordersCentreSpan{
    font-size: 12px;
    margin-top: 5px;
  }
  
  </style> -->